import { ModalProps, Modal as MuiModal } from '@mui/material';
import IcClose from 'src/image/ic-close.svg';
import style from './Modal.module.scss';

type Props = ModalProps & {
  handleClose: () => void;
  disableBackdropClick?: boolean;
};

const Modal = ({ open, handleClose, children, disableBackdropClick = false, ...props }: Props) => {
  const onCloseButtonClick = () => {
    handleClose();
  };

  const onMuiModalClose = (event: object, reason: string) => {
    if (!disableBackdropClick || reason !== 'backdropClick') handleClose();
  };

  return (
    <MuiModal open={open} onClose={onMuiModalClose} {...props}>
      <div className={style.self}>
        <img src={IcClose} className={style.close} onClick={onCloseButtonClick} />
        <div className={style.content}>{children}</div>
      </div>
    </MuiModal>
  );
};

export default Modal;
